@import "variables";

.calender-wrap{
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  /* 输入框 */
  .search-input-wrap{
    padding: 10px;
    background-color: $border-color2;
    .search-input{
      min-width: 200px;
      min-height: 32px;
      padding: 0 5px;
      color: $font-color;
      outline: none;
      border: 1px solid $border-color;
      border-radius: 4px;
      &::-webkit-input-placeholder{
        font-size: 12px;
        color: $placeholder-color;
      }
      &::-ms-input-placeholder{
        font-size: 12px;
        color: $placeholder-color;
      }
      &:focus{
        border-color: $primary-color;
      }
    }
    .input-error{
      display: block;
      margin-top: 4px;
      font-size: 12px;
      color: $danger-color;
    }
    .input-error-show{
      visibility: visible;
    }
    .input-error-hide{
      visibility: hidden;
    }
  }
  /* 内容主体 */
  .calender-content{
    flex: 1;
    display: flex;
    padding: 5px;
    border:2px solid $primary-color;
    /* 左侧 */
    .left-side-box {
      flex:1;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      font-size: $font-size;
      .select-wrap{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding:5px;
        background-color: $bg-color;
        color: $font-color;
        .year-select-wrap{
          display: inline-flex;
          min-height: 24px;
          margin:5px 10px;
        }
        .month-select-wrap{
          display: inline-flex;
          min-height: 24px;
          margin:5px 10px;
          .month-select-prev{
            @include prev-button
          }
          .month-select-next{
            @include next-button
          }
        }
        .back-today{
          min-height: 24px;
          margin: 5px 10px;
        }
      }
      table{
        flex:1;
        width: 100%;
        box-sizing: border-box;
        .week-row{
          padding: 10px 0;
          font-size: 1.5em;
          .week{
            font-weight: 600;
            color: $danger-color
          }
        }
        .day-row{
          text-align: center;
          font-size: 1.25em;
          cursor: pointer;
          color:$font-color;
          .day{
            background-color: $bg-color;
          }
          .prev-month,.next-month{
            color:$placeholder-color
          }
          .curr-month{
            background-color: $placeholder-color;
          }
          .today{
            background-color: $warning-color;
          }
        }
      }
    }
    /* 右侧 */
    .right-side-box{
      width: 25%;
      background-color: $primary-color;
      text-align: center;
      font-size: $font-size;
      .date-week-show{
        padding: 10px 5px;
        color: #ffffff;
        .curr-date{
          margin-right: 5px;
          font-size: 1.25em;
        }
        .curr-week{
          font-size: 1.3em;
        }
      }
      .curr-day-show{
        position: relative;
        width:50%;
        padding: 25%;
        background-color: $warning-color2;
        .curr-day{
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
          font-size: 3em;
          color:#ffffff;
        }
      }
      .curr-time-show{
        ul,li{
          list-style: none;
          margin:0;
          padding:0;
        }
        ul{
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          padding: 10px 2px;
          background-color: $info-color;
          box-sizing: border-box;
          li{
            flex: 1;
            color: $warning-color2;
          }
        }
      }
    }
  }
}
